<template>
	<view class="route-order">
		<u-sticky bgColor="#fff">
			<u-tabs :current="currentActive" lineColor="#ED2920" :list="tabList" @change="handleChageTab"></u-tabs>
			<view class="tiqicont">
				<view class="searchcont">
					<up-input v-model="qujianma" shape='circle' prefixIcon="search" placeholder="取件码"
						@confirm="handleConfirm" @clear="handleClear" border="surround" clearable></up-input>
				</view>

			</view>
		</u-sticky>
		<view class="cont">
			<view class="have" v-if="orderList.length">
				<view class="cloum" v-for="(item,index) in orderList" :key="index">
					<view class="cloumn-top">
						<view class="orderno">
							单号：{{item.orderno}}
						</view>

						<view class="status" v-if="item.status===2">
							未领取
						</view>
						<view class="status" v-if="item.status===3">
							已领取
						</view>

					</view>
					<view class="quhuoma">
						<view class="tag">

							<u-tag text="到店自提" size="mini"></u-tag>
						</view>
						<view class="ma">
							{{item.qujianma}}
						</view>

					</view>
					<view class="cloumn-middle">
						<view class="goods-info">
							<view class="info-item" v-for="(citem,cindex) in item.List" :key="citem">
								<view class="info-left">
									<image class="img" :src="citem.goodimage" mode=""></image>
								</view>
								<view class="info-right">
									<view class="name">
										{{citem.goodname}}
									</view>
									<view class="desc">
										{{citem.guige}}
									</view>

									<view class="priceandnum">
										<view class="price">
											<view class="">
												￥
											</view>
											<view class="val">
												{{formatNumber(citem.price)}}
											</view>
										</view>
										<view class="num">
											×{{citem.num}}
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>
					<view class="mendian">
						<view class="xx">
							门店
						</view>
						<view class="name">
							{{item.shanghu}}
						</view>

					</view>
					<view class="cloumn-bottom">
						<view class="info">
							<view class="name">
								{{item.name}}
							</view>
							<view class="price">
								<view class="">
									￥
								</view>
								<view class="val">
									{{formatNumber(item.price)}}
								</view>
							</view>
						</view>
						<!-- <view class="btncont">
							<view class="cancelbtn commonbtn" v-if="item.status===1" @click="handleCancleOrder(item)">
								取消订单
							</view>
							<view class="cancelbtn commonbtn" v-if="item.status===2||item.status===3"
								@click="handleTuikuan(item)">
								申请退款
							</view>
							<view class="confirmbtn commonbtn" v-if="item.status===1" @click="handlePay(item)">
								付款
							</view>
						</view> -->
					</view>
				</view>
				<u-loadmore :status="loadStatus" />
			</view>
			<view class="none" v-else>
				<u-empty mode="order"></u-empty>
			</view>
		</view>
	</view>
</template>

<script setup>
	import handleCache from "@/utils/cache.js"
	import {
		ref
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		orderApi
	} from '@/api/index.js'
	import formatNumber from "../../utils/formatNumber"
	const currentActive = ref(0)
	const currentPage = ref(1)
	const loadStatus = ref('loadmore')
	const totalPage = ref(0)
	const userInfo = ref('')
	const tiqi = ref(1)
	const qujianma = ref('')
	const tabList = ref([{
			name: '未领取'
		},

		{
			name: '已领取'
		},

	])
	const orderList = ref([])
	const getStattus = (status) => {
		let s = 0
		switch (status) {
			case 0:
				s = 2
				break
			case 1:
				s = 3;
				break

		}
		return s
	}
	onShow(() => {
		getOrderList()
	})
	onLoad((options) => {
		if (handleCache.get('userInfo')) {
			userInfo.value = handleCache.get('userInfo')
		}
		if (options.status) {
			currentActive.value = Number(options.status)


		}
	})
	onReachBottom(() => {

		loadData()
	})
	const handleConfirm = () => {
		getOrderList()
	}
	const handleClear = () => {

		getOrderList()
	}
	const getOrderList = () => {
		currentPage.value = 1
		let req = {
			uid: userInfo.value.id,
			shanghuid: userInfo.value.shanghuid,
			status: getStattus(currentActive.value),
			pageNo: currentPage.value,
			pageSize: 20,
			qujianma: qujianma.value
		}
		uni.showLoading({
			title: '加载中'
		})
		orderApi.blockorders(req).then((res) => {
			uni.hideLoading()

			totalPage.value = res.data.totalPage || 0
			orderList.value = res.data.list || []
			console.log(orderList.value, 111)
			if (totalPage.value > currentPage.value) {
				loadStatus.value = 'loadmore'
			} else {
				loadStatus.value = 'nomore'
			}
		})
	}
	const loadData = () => {

		if (currentPage.value >= totalPage.value) return;
		loadStatus.value = 'loading'
		currentPage.value = ++currentPage.value

		let req = {
			shanghuid: userInfo.value.shanghuid,
			uid: userInfo.value.id,
			status: getStattus(currentActive.value),
			pageNo: currentPage.value,
			pageSize: 20,
			qujianma: qujianma.value
		}
		uni.showLoading({
			title: '加载中'
		})
		orderApi.blockorders(req).then((res) => {
			uni.hideLoading()
			orderList.value = [...orderList.value, ...res.data.list]
			if (totalPage.value > currentPage.value) {
				loadStatus.value = 'loadmore'
			} else {
				loadStatus.value = ' nomore'
			}
		})

	}
	const handleCheckTiqi = (data) => {
		console.log(data, 888)
		if (data === tiqi.value) {
			return
		}
		tiqi.value = data

		getOrderList()
	}
	const handleChageTab = (data) => {
		let index = data.index
		currentActive.value = index
		qujianma.value = ''
		getOrderList()
	}
	const handleCancleOrder = (data) => {
		uni.showModal({
			title: '提示', // 标题
			content: '确定取消当前订单吗?', // 提示内容
			labelColor: '#3385e3', // 确认按钮文字颜色
			cancelText: "取消", // 取消按钮的文字
			confirmText: "确认", // 确认按钮的文字
			showCancel: true, // 是否显示取消按钮，默认为 true
			confirmColor: '#ED2920',

			success(res) {
				if (res.confirm) {
					//点击确定之后执行的代码
					uni.showLoading({
						mask: true,
					})
					orderApi.orderqx({
						orderid: data.id
					}).then((res) => {
						uni.hideLoading()
						if (res.code === 0) {
							uni.showToast({
								mask: true,
								icon: 'none',
								title: '取消成功'
							})
							getOrderList()
						} else {
							uni.showToast({
								mask: true,
								icon: 'none',
								title: res.msg
							})
						}
					})
				} else {
					//点击取消之后执行的代码
				}
			}
		});
	}
	const handleTuikuan = (data) => {
		uni.showModal({
			title: '提示', // 标题
			content: '确定申请退款吗?', // 提示内容
			labelColor: '#3385e3', // 确认按钮文字颜色
			cancelText: "取消", // 取消按钮的文字
			confirmText: "确认", // 确认按钮的文字
			showCancel: true, // 是否显示取消按钮，默认为 true
			confirmColor: '#ED2920',

			success(res) {
				if (res.confirm) {
					//点击确定之后执行的代码
					uni.showLoading({
						mask: true,
					})
					orderApi.ordertk({
						orderid: data.id
					}).then((res) => {
						uni.hideLoading()
						if (res.code === 0) {
							uni.showToast({
								mask: true,
								icon: 'none',
								title: '申请成功'
							})
							getOrderList()
						} else {
							uni.showToast({
								mask: true,
								icon: 'none',
								title: res.msg
							})
						}
					})
				} else {
					//点击取消之后执行的代码
				}
			}
		});
	}
	const handlePay = (data) => {
		uni.navigateTo({
			url: '/pages/playorder/playorder?orderId=' + data.id
		})
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss'
</style>